<template>
    <div class="my">
        <div class="userinfo">
            <div class="img-box">
                <img :src="userinfo.avatar" alt="">
            </div>
            <div class="username">{{ userinfo.nickname }}</div>
        </div>
        <div class="sheets">
            <div class="sheets-box">
                <div class="sheets-item" @click="handleTo('/pages/myDesgin/index')">
                    <img src="../../../static/image/my-icon1.png" alt="">
                    <p>我的设计</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
                <div class="sheets-item" @click="handleTo('/pages/myHistory/index')">
                    <img src="../../../static/image/my-icon2.png" alt="">
                    <p>我的贺卡记录</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
                <div class="sheets-item" @click="handleOpenServiceDialog">
                    <img src="../../../static/image/my-icon3.png" alt="">
                    <p>联系客服</p>
                    <span class="arrow">
                        <svg t="1651564612822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M384 768 640 512 384 256Z" p-id="2059" fill="#bfbfbf"></path></svg>
                    </span>
                </div>
            </div>
        </div>
        <van-dialog id="van-dialog" confirm-button-color="#5581FA"/>
        <van-tabbar
            :fixed="false"
            active="3"
            active-color="#07c160"
            inactive-color="#000"
            @change="onChangeTabBar"
        >
            <van-tabbar-item name="1" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item name="2" icon="add"></van-tabbar-item>
            <van-tabbar-item name="3" icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import {getServiceConf, getUserInfo} from "@/api";
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
import Interceptor from "@/utils/Interceptor";

export default {
    name: "tarbarMyIndex",
    data() {
        return {
            userinfo: {
                avatar: '',
                nickname: '未登录',
            },
            serviceConf: {
                mobile: null
            }
        }
    },
    onShow() {
        console.log('H获取用户信息')
        getUserInfo().then(res => {
            wx.setStorageSync('userInfo', res.data || {
                "authedAvatar": false,
                "avatar": "",
                "nickname": "",
                "phone": ""
            })
            this.userinfo = res.data
        })
    },
    methods: {
        handleTo(url) {
            uni.navigateTo({
                url
            })
        },
        // 打开客服对话框
        async handleOpenServiceDialog() {
            // on close
            if (!this.serviceConf.mobile) {
               const res = await getServiceConf()
                this.serviceConf = res.data
            }
            await Dialog.alert({
                message: `客服联系方式：${this.serviceConf.mobile}`,
            })
        },
        onChangeTabBar(value) {
            console.log(value.detail)
            if (value.detail === '1') {
                uni.redirectTo({
                    url: '/pages/tabBar/home/index'
                })
            }
            Interceptor().then(res => {
                if (value.detail === '2') {
                    uni.navigateTo({
                        url: `/pages/desgin/create`
                    })
                }
            })
        }
    }
}
</script>

<style lang="less">
.my {
    height: 100vh;
    background-color: #FAFAFA;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .userinfo {
        width: 100%;
        height: 116px;
        background: #00C65A;
        padding: 30px;
        display: flex;
        align-items: center;
        .img-box {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .username {
            width: 125px;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 22px;
        }
    }
    .sheets {
        flex-grow: 1;
        padding: 16px;
        .sheets-box {
            border-radius: 4px;
            background-color: #FFFFFF;
            padding: 4px;
        }
        .sheets-item {
            position: relative;
            border-bottom: 1px solid #E4E4E4;
            display: flex;
            align-items: center;
            height: 46px;
            img {
                width: 18px;
                height: 18px;
                margin-right: 12px;
                margin-left: 4px
            }
            p {
                height: 18px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #1F222D;
                line-height: 18px;
            }
            .arrow {
                position: absolute;
                top: 0;
                right: 17px;
            }
        }
        .sheets-item:last-child {
            border-bottom: none;
        }
    }
    
}
</style>